@mixin fullSizeOverlay {
  @include size(100%);
  position: absolute;
  top: 0;
}

@mixin fadeIn {
  opacity: 0;
  animation-duration: 1s;
  animation-fill-mode: forwards;

  &:global {
    animation-name: fadeIn;
  }
}

.loading-screen {
  width: 100vw;
  position: fixed;
  transition: opacity 1s ease-out;
  background-color: $colorVulcan;

  &-background-image {
    @include fullSizeOverlay;
  }

  &.fade-out {
    opacity: 0;
    transition-delay: 0.4s;
  }

  &.hidden {
    display: none;
  }
}

.overlay {
  @include fullSizeOverlay;
  @include fadeIn;

  background-color: rgba(black, 0.5);

  &-gradient {
    @include fullSizeOverlay;

    background: linear-gradient(
      180deg,
      rgba(0, 0, 0, 0.7) -3.4%,
      rgba(0, 0, 0, 0) 62%
    );
  }
}

.logo {
  &-wrapper {
    @include fullSizeOverlay;

    display: flex;
    align-items: center;
  }

  &-icon {
    @include size(35%, 32%);
    @include fadeIn;

    transform: translate3d(-1.6%, 0, 0);
    margin: auto;
    animation-delay: 0.6s;
  }
}

.loading-indicator {
  &-wrapper {
    @include fullSizeOverlay;
  }

  &-icon {
    @include size(50vw);

    position: absolute;
    transform-origin: bottom right;
    transition: transform 0.2s ease-out;
  }

  &-top {
    top: -50vw;
    left: -50vw;
  }

  &-bottom {
    bottom: 0;
    right: 0;
  }
}
